<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border: 0;

        }
        i {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: black;
            display: block;
            margin-left: 10px;
        }

        th {
            background-color: grey;
            text-align: left;
            width: 110px;
            font-size: 15px;
        }
        td{
            width: 30px;
        }
    </style>
    <script>

        window.onload = function () {
            let trs = document.getElementsByTagName("tr");
            let ths = document.getElementsByTagName("th");
            let is = document.getElementsByTagName("i");
            let oldColor;
            let oldWidth = is[0].style.width
            let oldHeight = is[0].style.height
            let oldFontSize = ths[0].style.fontSize;

            for (let i = 0; i < trs.length; i++) {
                trs[i].onmouseover = function () {
                    oldColor = this.style.backgroundColor;
                    ths[i].style.backgroundColor = "red"
                    ths[i].style.fontSize = "25px"
                    is[i].style.width = "10px"
                    is[i].style.height = "10px"
                }
                trs[i].onmouseout = function () {
                    ths[i].style.backgroundColor = oldColor
                    is[i].style.width = oldWidth
                    is[i].style.height = oldHeight
                    ths[i].style.fontSize = oldFontSize
                }
            }
        }

    </script>
</head>
<body>
<table cellspacing="0">
    <tr>
        <td><i></i></td>
        <th>曼联</th>
    </tr>
    <tr>
        <td><i></i></td>
        <th>中国</th>
    </tr>
    <tr>
        <td><i></i></td>
        <th>美国</th>
    </tr>
    <tr>
        <td><i></i></td>
        <th>阿根廷</th>
    </tr>
    <tr>
        <td><i></i></td>
        <th>西班牙</th>
    </tr>
</table>
</body>
</html>